<template>
  <div class="introduction">
    <div class="btnreturn">
      <a @click="returnl()">
        <i class="icon iconfont icon-houtui" style="font-size:35px;color:#55ADEB;"></i>
      </a>
    </div>
    <div id="banner">
       <!-- <img src="./images/FAQ2_03.jpg" alt="" srcset="" style="width:100%;height:100%;"> -->
       <!-- <h1 class="FaQ">{{$t('FAQ.src')}}</h1> -->
    </div>
    <!-- <div class="loginPage">
      <h3 class="title">登录页 (Login Page)</h3>
        <div class="Login-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>Why nothing happens when I click on the icons?</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>We recommend you try reloading the page. If it doesn’t help, see if you can use a different browser. CBI supports all mainstream browsers, except for Internet Explorer 9 and below. If you continue seeing the problem, please send an email to cbicomms@lenovo.com.</div>
          </div>
        </div>
        <div class="Login-two">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>Why can’t I log in after I’ve applied for authorization?</span>
          </p>
          <div class="flex-wrapper">Searching
            <div><img src="./images/Q.png" alt=""></div>
            <div>Approving applications takes time. If you haven’t received an email granting you access to CBI, please be patient – we will get back to you as soon as we can. </div>
          </div>
        </div>
        <div class="Login-three">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>I’m having trouble accessing CBI website on Internet Explorer, what should I do?</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>CBI currently supports Internet Explorer 10 and above. If your version is below 10, we recommend you try another browser (Chrome, Firefox, Microsoft Edge, QQ browser, etc.).</div>
          </div>
        </div>
    </div> -->
    <div class="questionImg"><img src="./images/questionImg.png"></div>
    <div class="dataSource firstData">
      <img src="./images/FAQtop.png"><span class="faq">FAQ</span>
      <div class="CBICertificate">
        <div class="tips">
          <span>{{$t('FAQ.Tips')}}</span>
          <a href="../../../static/doc/SHA2ROOTCA_LenovoSHA2ROOTCA.cer">{{$t('FAQ.CBICertificate')}}</a>
          <span>{{$t('FAQ.guide')}}</span>
          <a :href="`../../../static/doc/${href}.docx`" :download="download">{{$t('FAQ.methods')}}</a>
        </div>
      </div>
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.DataSource.title')}}</h3>
        <div class="Data-one" v-for="item in $t('FAQ.DataSource.question')">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{item.q}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>
              <span v-html="item.a.answer"></span><br>
              <!--<span>{{$t('FAQ.SourceAnswer1two')}}</span>-->
              <a href="javascript:;" style="border-bottom:1px solid #959595;" @click="aboutus">{{item.a.url}}</a>
            </div>
          </div>
        </div>
    </div>
    <div class="dataSource">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.echart.title')}}</h3>
        <div class="Data-one" v-for="item in $t('FAQ.echart.question')">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{item.q}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>
              <span v-html="item.a.answer"></span><br>
              <!--<span>{{$t('FAQ.SourceAnswer1two')}}</span>-->
              <a href="javascript:;" style="border-bottom:1px solid #959595;" @click="aboutus">{{item.a.url}}</a>
            </div>
          </div>
        </div>
    </div>
    <div class="dataSource">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.search.title')}}</h3>
      <div class="Data-one" v-for="item in $t('FAQ.search.question')">
        <p class="questes">
          <img src="./images/F.png" alt="">
          <span v-html="item.q"></span>
        </p>
        <div class="flex-wrapper">
          <div><img src="./images/Q.png" alt=""></div>
          <div>
            <span v-html="item.a"></span><br>
            <ul v-for="items in item.b">
              <li v-html="items.aList"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="dataSource">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.customer.title')}}</h3>
      <div class="Data-one" v-for="item in $t('FAQ.customer.question')">
        <p class="questes">
          <img src="./images/F.png" alt="">
          <span>{{item.q}}</span>
        </p>
        <div class="flex-wrapper">
          <div><img src="./images/Q.png" alt=""></div>
          <div>
            <span v-html="item.a"></span><br>
            <ul v-for="items in item.b">
              <li v-html="items.aList"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <div class="dataSource">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.customerValue.title')}}</h3>
      <div class="Data-one">
      <!--   <p class="questes">
          <img src="./images/F.png" alt="">
          <span>{{$t('FAQ.customerValue.question.logical.label')}}</span>
        </p> -->
        <div class="flex-wrapper">
          <div><img src="./images/Q.png" alt=""></div>
          <div>
            <span>{{$t('FAQ.customerValue.question.logical.label')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.logical.statisTime')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.logical.distri')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.logical.rent')}}</span><br>
            <img src="./images/logiczh.jpg" height="490" width="850" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'zh'">
            <img src="./images/logicen.png" height="550" width="900" v-show="$t('FAQ.customerValue.question.logical.imgUrl') === 'en'">
       <!--      <ul>
              <li>{{$t('FAQ.customerValue.question.logical.statisTime')}}</li>
              <li>{{$t('FAQ.customerValue.question.logical.distri')}}</li>
              <li>{{$t('FAQ.customerValue.question.logical.rent')}}</li>
            </ul> -->
          </div>
        </div>
        <div class="flex-wrapper">
          <div><img src="./images/Q.png" alt=""></div>
          <div>
            <span>{{$t('FAQ.customerValue.question.rfm.label')}}</span><br>
            <span>{{$t('FAQ.customerValue.question.rfm.statisTime')}}</span><br>
            <img src="./images/RFMzh.jpg" height="450" width="850" v-show="$t('FAQ.customerValue.question.rfm.imgUrl') === 'zh'">
            <img src="./images/RFMen.png" height="400" width="900" v-show="$t('FAQ.customerValue.question.rfm.imgUrl') === 'en'">
       <!--      <ul>
              <li>{{$t('FAQ.customerValue.question.logical.statisTime')}}</li>
              <li>{{$t('FAQ.customerValue.question.logical.distri')}}</li>
              <li>{{$t('FAQ.customerValue.question.logical.rent')}}</li>
            </ul> -->
          </div>
        </div>
      </div>
    </div>
    <div class="dataSource">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.others.title')}}</h3>
      <div class="Data-one" v-for="item in $t('FAQ.others.question')">
        <p class="questes">
          <img src="./images/F.png" alt="">
          <span>{{item.q}}</span>
        </p>
        <div class="flex-wrapper">
          <div><img src="./images/Q.png" alt=""></div>
          <div>
            <span v-html="item.a"></span><br>
            <ul v-for="items in item.b">
              <li v-html="items.aList"></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
<!--     <div class="Searching" id="zhidin">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.search.title')}}</h3>
    </div> -->
   <!--  <div class="dataQuality">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.DataQuality')}}</h3>
        <div class="Data-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Qualityproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div v-html="$t('FAQ.QualityAnswer1one')"></div>
          </div>
        </div>
    </div>
    <div class="Supported">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Supported')}}</h3>
        <div class="Supported-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Supportedproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>{{$t('FAQ.SupportedAnswer1one')}}</div>
          </div>
        </div>
    </div>
    <div class="Searching" id="zhidin">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Searching')}}</h3>
        <div class="Searching-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Searchingproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>{{$t('FAQ.SearchingAnswer1one')}}<span @click="herf" v-html="$t('FAQ.SearchingAnswer1one_mao')" style="border-bottom:1px solid #959595;"></span></div>
          </div>
        </div>
        <div class="Searching-two">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Searchingproblemtwo')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>
             <span>{{$t('FAQ.SearchingAnswer2one')}} </span><br>
             <span v-html="$t('FAQ.SearchingAnswer2two')"></span>
            </div>
          </div>
        </div>
        <div class="Searching-three">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Searchingproblemthree')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>
              <ul class="ulttwo">
                <li>
                  {{$t('FAQ.SearchingAnswer3one')}}
                  <ul>
                    <li>{{$t('FAQ.SearchingAnswer3_1one')}}</li>
                    <li>{{$t('FAQ.SearchingAnswer3_1two')}}</li>
                    <li><span>{{$t('FAQ.SearchingAnswer3_1three')}}</span><br><span v-html="$t('FAQ.SearchingAnswer3_1_3three')"></span></li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
    </div>
    <div class="filter" id="filter">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Filter')}}</h3>
        <div class="filter-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Filterproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>
              <span>{{$t('FAQ.FilterAnswer1one')}}</span><br>
              <span>{{$t('FAQ.FilterAnswer1_2one')}}</span>
              <ul class="ulttwo">
                <li>
                  <ul>
                    <li>{{$t('FAQ.FilterAnswer1_1one')}}</li>
                    <li><span>{{$t('FAQ.FilterAnswer1_1two')}}</span><br><span>{{$t('FAQ.FilterAnswer1_1_2two')}}</span></li>
                    <li>{{$t('FAQ.FilterAnswer1_1three')}}</li>
                  </ul>
                </li>
              </ul>
            </div>
          </div>
        </div>
    </div>
    <div class="Reporting">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Reporting')}}</h3>
        <div class="Reporting-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Reportingproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>
              <ul class="ulttwo">
                <li>
                  {{$t('FAQ.ReportingAnswer1one')}}
                  <ol>
                    <li>
                       {{$t('FAQ.ReportingAnswer1_1one')}}
                       <ul>
                         <li>{{$t('FAQ.ReportingAnswer1_2one')}}</li>
                       </ul>
                    </li>
                    <li>
                       {{$t('FAQ.ReportingAnswer1_1two')}}
                       <ul>
                         <li>{{$t('FAQ.ReportingAnswer1_2_1two')}}</li>
                         <li>{{$t('FAQ.ReportingAnswer1_2_2two')}}</li>
                         <li>{{$t('FAQ.ReportingAnswer1_2_3two')}}</li>
                         <li>{{$t('FAQ.ReportingAnswer1_2_4two')}}</li>
                         <li>{{$t('FAQ.ReportingAnswer1_2_5two')}}</li>
                         <li>{{$t('FAQ.ReportingAnswer1_2_6two')}}</li>
                       </ul>
                    </li>
                  </ol>
                </li>
              </ul>
            </div>
          </div>
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Reportingproblemtwo')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div v-html="$t('FAQ.ReportingAnswer2one')"></div>
          </div>
        </div>
    </div>
    <div class="ReportingFunctionality">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Functionality')}}</h3>
        <div class="Supported-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Functionalityproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div>{{$t('FAQ.FunctionalityAnswer1one')}}</div>
          </div>
        </div>
    </div>
    <div class="ReportingFunctionality">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Contact')}}</h3>
        <div class="Supported-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Contactproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div v-html="$t('FAQ.ContactAnswer1one')"></div>
          </div>
        </div>
    </div>
    <div class="ReportingFunctionality">
      <h3 class="title"><img src="./images/737.png">{{$t('FAQ.Others')}}</h3>
        <div class="Supported-one">
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Othersproblemone')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div v-html="$t('FAQ.OthersAnswer1one')"></div>
          </div>
          <p class="questes">
            <img src="./images/F.png" alt="">
            <span>{{$t('FAQ.Othersproblemtwo')}}</span>
          </p>
          <div class="flex-wrapper">
            <div><img src="./images/Q.png" alt=""></div>
            <div v-html="$t('FAQ.OthersAnswer2one')"></div>
          </div>
        </div>
    </div> -->
  </div>
</template>

<script>
  import {mapGetters} from "vuex";
export default {
  data(){
    return{
      href: '',
      download: '',
      hrefEN: 'certificateEN',
      hrefCH: 'certificateCH',
      downloadEN: 'Install Google certificate',
      downloadCH: '安装谷歌证书'
    }
  },
  computed: {
    ...mapGetters(['language'])
  },
  watch: {
    language() {
      this.InstallCertificate()
    }
  },
  methods:{
    //回退
    returnl(){
      this.$router.push('/login')
    },
    InstallCertificate(){
      if(this.language === 'en'){
        this.href = this.hrefEN
        this.download = this.downloadEN
      }else if (this.language === 'zh') {
        this.href = this.hrefCH
        this.download = this.downloadCH
      }
    },
    herf(){
      var filter = document.getElementById("filter").offsetTop-50;
      window.scrollTo(500,filter);
    },
    aboutus(){
      this.$router.push('/AboutUs/index')
    },
    goAnchor (selector) {
      var anchor = this.$el.querySelector(selector)
      document.body.scrollTop = anchor.offsetTop
    }
  },
  mounted() {
    this.InstallCertificate()
    // const _this = this
    // var linkDom = document.getElementById('linkDom')
    // linkDom.onclick = function () {
    //   _this.$router.push('/guide')
    // }
  },
  updated() {
    // const _this = this
    // var linkDom = document.getElementById('linkDom')
    // linkDom.onclick = function () {
    //   _this.$router.push('/guide')
    // }
  }
}
</script>

<style lang="scss" scoped>
.introduction{
  width: 100%;
  background-color: #f6f7fb;
  padding: 0 20px 0 46px;
  .btnreturn {
    position: fixed;
    right: 15px;
    top: 15px;
    z-index: 99;

  }
}
.CBICertificate{
  .tips{
    margin:20px 0;
    color:#f33;
    a{
      cursor:pointer;
      border-bottom: 1px solid #09f;
      color: #09f;
    }
  }
}
.title{
  margin-bottom: 0px;
  padding-top: 10px;
  color:#0090e9;
  font-family: 'Arial-BoldMT';
  display:flex;
  align-items: center;
  font-size: 22px;
  img{
    height:10px;
    width:10px;
    margin-right:5px
  }
}
#banner{
/*  height: 200px;*/
  width: 100%;
  background-image: url(./images/FAQ2_03.jpg);
  background-size: 100% 100%;
  position: relative;
  .FaQ{
    font-size: 66px;
    color: #ffffff;
     position: absolute;
     top: 20px;
     left:160px;
  }
}
.firstData{
  display: inline-block !important;
  width:58% !important;
}
.questionImg{
  float:right;
  margin: 60px 80px 0 0;
  img{
    width:27vw;
  }
}
.dataSource{
  width: 100%;
  margin-top: 42px;
/*  // background-color: #FCFCFC;
  // margin-bottom: 20px;
  // padding: 10px 15px;
  // border-radius: 5px;
  // box-shadow: 1px 2px 5px #cccccc;*/
  .faq{
    font-size: 60px;
    font-style: Helvetica Regular;
    background: -webkit-linear-gradient(left, #56c0f5 , #3da2dd); /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #56c0f5, #3da2dd); /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #56c0f5, #3da2dd); /* Firefox 3.6 - 15 */
    background: linear-gradient(to bottom, #56c0f5 , #3da2dd); /* 标准的语法 */
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    height:72px;
    line-height: 72px;
    position: relative;
    margin-left:10px;
    top: -12px;
  }
  .questes{
    font-family: "MicrosoftYaHei[Regular]";
    color: #333333;
    font-size: 18px;
    padding-top: 15px;
    margin-bottom: 5px;
    margin: 0px;
    span{
      font-size:18px;
      font-family: 'ArialMT';
      color: #000000;
    }
    img{
       vertical-align: bottom;
       margin-right: 5px;

    }
  }
  .flex-wrapper{
    display: flex;
    margin-top: 12px;
    font-family: "ArialMT";
    color: #999;
    font-size: 16px;
    div:nth-of-type(1){
     margin-right: 10px;
     margin-top: 5px;
    }
    div:nth-of-type(2){
     line-height: 25px;
    }
  }
}
// .dataSource{
//   @extend .loginPage;
// }
.dataQuality{
  @extend .dataSource;
}
.Supported{
  @extend .dataSource;
}
.Searching{
  @extend .dataSource;
}
.filter{
  @extend .dataSource;
}
.Reporting{
   @extend .dataSource;
}
.ReportingFunctionality{
   @extend .dataSource;
}
.ulttwo{
  img{
    vertical-align: middle;
  }
  list-style: none;
  padding: 0px;
  margin: 0px;
  line-height: 30px;
  font-family: "MicrosoftYaHei[Regular]";
  color: #959595;
  font-size: 15px;
}
</style>


